<template>
  <div class="order-list">
    <van-pull-refresh v-model="pullLoading" @refresh="onRefresh">
      <van-list
        class="van-clearfix"
        offset="500"
        v-model="loading"
        :finished="finished"
        finished-text="没有更多了"
        ref="list"
        @load="getOrders"
      >
        <order1 v-for="order in orders" :key="order.tradeId" :order="order" />
      </van-list>
    </van-pull-refresh>
  </div>
</template>

<script>
import Order1 from "@/views/user/components/Order1.vue";
import { List, PullRefresh } from "vant";
export default {
  name: "OrderList",
  components: {
    Order1,
    [List.name]: List,
    [PullRefresh.name]: PullRefresh
  },
  props: {
    status: String
  },
  data() {
    return {
      orders: [],
      page: 1,
      loading: false,
      finished: false,
      pullLoading: false
    };
  },
  methods: {
    getOrders() {
      let vm = this;
      let oldPage = vm.page;
      setTimeout(() => {
        vm.$ajax
          .get(
            "/order?type=TB&pageSize=10&pageNum=" +
              vm.page++ +
              (vm.status ? "&status=" + vm.status : "")
          )
          .then(r => {

            if (vm.pullLoading) {
              vm.orders.length = 0;
              vm.pullLoading = false;
            }

            vm.orders.push.apply(vm.orders, r.data.data);
            vm.loading = false;
            if (r.data.data.length < 10) {
              vm.finished = true;
            }

          })
          .catch(e => {
            vm.loading = false;
            vm.page = oldPage;
          });
      }, 500);
    },
    onRefresh() {
      this.pullLoading = true;
      this.finished = false;
      this.page = 1;
      this.loading = true;
      this.getOrders();
    }
  }
};
</script>

<style scoped>
.order1 {
  border-radius: 10px;
  background-color: white;
  margin: 10px;
}
</style>